<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>绘制一个点</title>
		<link rel="stylesheet" href="../css/common.css">
	</head>
	<body>
		<canvas id="webgl" width="512" height="512"></canvas>
	</body>
	<!-- <script src="../lib/webgl-utils.js"></script>
	<script src="../lib/webgl-debug.js"></script>
	<script src="../lib/cuon-utils.js"></script> -->
	<script>
		// 顶点着色器
		var vertex_shader_source =
			'void main() {' +
			'   gl_Position = vec4(0.0, 0.0, 0.0, 1.0);' + // 设置顶点坐标
			'   gl_PointSize = 10.0;' + // 设置顶点的大小
			'' +
			'}';

		// 片元着色器
		var fragment_shader_source =
			'void main(){' +
			'   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);' + //设置顶点颜色
			'}';

		(function() {


			// 获取 canvas 对象
			var canvas = document.getElementById('webgl');

			// 获取webgl上下文对象
			var gl = getWebGLContext(canvas);

			// 初始化着色器
			if (!initShader(gl, vertex_shader_source, fragment_shader_source)) {

				console.log('初始化着色器失败');
				return false;

			}

			// 指定canvas背景颜色
			gl.clearColor(0.0, 0.5, 0.5, 1.0);

			// 清除颜色缓冲区
			gl.clear(gl.COLOR_BUFFER_BIT);

			gl.drawArrays(gl.POINTS, 0, 1);


		}());

		// 初始化着色器方法
		function initShader(gl, vertexShaderSource, fragmentShaderSource) {

			// 创建顶点着色器对象
			var vertexShader = gl.createShader(gl.VERTEX_SHADER);

			// 创建片元着色器对象
			var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

			// 引入着色器代码
			gl.shaderSource(vertexShader, vertexShaderSource);
			gl.shaderSource(fragmentShader, fragmentShaderSource);

			// 编译顶点和片元着色器代码
			gl.compileShader(vertexShader);
			gl.compileShader(fragmentShader);

			// 创建程序对象
			var program = gl.createProgram();

			// 附着附着着色器到程序
			gl.attachShader(program, vertexShader);
			gl.attachShader(program, fragmentShader);

			// 链接程序
			gl.linkProgram(program);

			// 使用程序
			gl.useProgram(program);

			// 返回 program 对象
			return program;

		}
	</script>
</html>
